<template>
  <div class="dashboard-container">
    <div class="dashboard-content">
      <h1>欢迎来到仪表板</h1>
      <p>请选择：</p>

      <!-- 按钮，点击后跳转到不同的日志页面 -->
      <div class="button-group">
        <button @click="goToLoginLogs">查看登录日志</button>
        <button @click="goToOperationLogs">查看操作日志</button>
        <button @click="goToTerminalsessionsLogs">查看终端会话视频</button>
        <button @click="goToTransactionLogs">查看交易日志</button>
        <button @click="goToDownloadLogs">下载日志和视频</button>

      </div>

      <!-- 介绍框 -->
      <div class="info-box">
        <h2>介绍</h2>
        <p><strong>登录日志：</strong> 记录系统中用户的登录信息，包括登录时间、用户身份、登录成功或失败的状态、登录来源等。这些信息对于审计和安全监控至关重要。</p>
        <p><strong>操作日志：</strong> 记录用户的操作行为，包括操作类型、时间、操作结果等信息，有助于追踪系统活动并进行问题排查。</p>
        <p><strong>终端会话视频：</strong> 记录用户与系统交互的终端会话，包括屏幕录像、用户操作等内容。用于事后查看或审计。</p>
        <p><strong>交易日志：</strong> 记录所有区块链上的交易信息，包括交易的发送方、接收方、交易金额等。这些信息对于跟踪和验证交易至关重要。</p>
        <p><strong>下载日志和视频：</strong> 用户可以下载与日志和视频相关的文件，便于事后分析和存档。</p>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  methods: {
    // 跳转到登录日志页面
    goToLoginLogs() {
      this.$router.push('/login-logs');
    },

    // 跳转到操作日志页面
    goToOperationLogs() {
      this.$router.push('/operate-logs');
    },

    // 跳转到终端会话视频页面
    goToTerminalsessionsLogs() {
      this.$router.push('/terminalsessions-logs');
    },

    // 跳转到交易日志页面
    goToTransactionLogs() {
      this.$router.push('/transaction-logs');
    },

    // 跳转到下载日志和视频页面
    goToDownloadLogs() {
      this.$router.push('/DownloadPage');
    },


  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  text-align: center;
}

.dashboard-content {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s;
  width: 180px;
}

button:hover {
  background-color: #0056b3;
}

/* 介绍框样式 */
.info-box {
  margin-top: 30px;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.info-box h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
}

.info-box p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

.info-box strong {
  font-weight: bold;
}
</style>
